<template>
  <div class="box">
    儿子的玩具： {{ toy }}
  </div>
  <div class="slot-box">
    <slot name="default">默认插槽</slot>
    <slot name="context">具名插槽</slot>
    <hr>
    <slot name="list" :data="list">作用于插槽</slot>
  </div>

</template>

<script lang='ts' setup>
import { reactive, ref } from 'vue';

const toy = ref("奥特曼")

const list = reactive([
  { name: '书', price: 10 },
  { name: '笔', price: 5 },
  { name: '画笔', price: 2 },
])

</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
  min-height: 120px;
}

.slot-box {
  padding: 10px;
  background-color: #614ae4;
  border: 1px solid #ccc;
  margin-top: 20px;
  color: white;
}
</style>
